<template>
  <div class="type-select-tree">
    <div class="toText">{{scriptItem.label}}
      <TypeLabelTips v-if="scriptItem.labelTips"
                     :scriptItem='scriptItem'
                     :dataForm='dataForm' />
    </div>
    <tree-select :data="dataSource"
                 :height="400"
                 :width="464"
                 :placeholder="$t('placeholder.sc')"
                 :defaultProps="defaultProps"
                 @parent-event="popoverHide"
                 multiple
                 class="tree_that"
                 :clear="clearTreeSelect"
                 :nodeKey="nodeKey"
                 :checkedKeys="defaultCheckedKeys"
                 @popoverHide="popoverHide"></tree-select>
  </div>
</template>

<script>
import TreeSelect from '@/components/tree-select'
import mixinTypeViewModule from '@/mixins/script-type-view-module'
import TypeLabelTips from '../components/type-label-tips'

export default {
  components: { TreeSelect, TypeLabelTips },
  mixins: [mixinTypeViewModule],
  data () {
    return {
      dataSource: [],
      clearTreeSelect: 0,
      defaultProps: {
        children: this.scriptItem['children'],
        label: this.scriptItem['title'],
        disabled: function (data) {
          return data['disable']
        }
      },
      nodeKey: this.scriptItem['nodeKey'],
      defaultCheckedKeys: []
    }
  },
  mounted () {
    this.onInit()
  },
  methods: {
    async onInit () {
      this.defaultCheckedKeys = this.dataForm[this.scriptItem['text']]
      // eslint-disable-next-line valid-typeof
      if (typeof this.scriptItem['dataSourceUrl'] !== '') {
        const { data: res } = await this.$interface.clientReport.getBoardListForBotApi(this.scriptItem['dataSourceUrl'], {})
        this.loading = false
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        if (res.data) {
          this.dataSource = res.data
        }
      }
    },
    popoverHide (checkedIds, checkedData) {
      this.dataForm[this.scriptItem['text']] = checkedIds
    }
  }
}
</script>

<style lang="scss" scoped>
.type-select-tree {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  // box-shadow:  0px 1px 0px 0px #F0F0F0;
  padding: 10px 0;
  .toText {
    // width: 20px;
    margin-right: 10px;
  }
  .tree_that {
    flex: 1;
    // div{
    //   width: auto;
    // }
    input {
      margin-left: 15px;
    }
    ::v-deep > span {
      display: block;
      width: 100%;
    }
    ::v-deep > span > div {
      width: 100% !important;
    }
  }
}
</style>
